section.video {
      /*padding: 0 12px;*/
  max-width: 100%;

  position: relative;

  &[channal='y66t']{
    li {
      width:100% !important;
      padding:0 !important;
      .title{
        white-space: normal;
        line-height: 2em;
      }
    }
  }

  .content{
    padding-top:50px;
  }
  &.show-cats{
    .subcats{
      display: block;
    }
    .btn-cat
    {
      background: url("data:image/svg+xml;charset=utf-8,<svg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'><polyline points='4,16 12,8 20,16' style='stroke:#999999;stroke-width:2;fill-opacity:0;'/></svg>") center center / 24px 24px no-repeat;
    }
  }
  .btn-cat{
      width:40px;
      height: 40px;
      float: left;
      background: url("data:image/svg+xml;charset=utf-8,<svg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'><polyline points='4,8 12,16 20,8' style='stroke:#999999;stroke-width:2;fill-opacity:0;'/></svg>") center center / 24px 24px no-repeat;
      border-left: 1px solid #eee;
      border-bottom: none;
  }
  .cats{
    overflow-x: auto;
    border-bottom: 1px solid #ddd;
    background: #fafafa;
    position: fixed;
    top:0;left:0;
    width:100%;
    z-index:100;
    &>div{
      width:100%;
    }
    a{ 
      font-size:15px;
      display: block; 
      padding:0 15px;
      height:40px;
      line-height: 40px;
      text-align: center;
      box-sizing: border-box;
      float: left;
      color:#333;
      border-bottom:2px solid rgba(0,0,0,0);
      text-transform: uppercase;
    }
    a:hover , a.active{
      color:#65c178;
      border-bottom-color:#65c178;
    }

    .op{
      display: inline-block;
      float:right;
      a{
        color:#888;font-size: 12px;
      }
    }

    
  }
  .subcats{
    margin-bottom: 8px;
    padding:5px 0;
    display: none;
    top:41px;

    a{
      background: #d6d6d6;
      border-radius: 15px;
      margin:3px 5px;
      font-size: 12px;
      color:#333;
      box-sizing: border-box;
      border:1px solid transparent;
      height:30px;
      line-height: 30px;

    }
    a:hover , a.active{
      border:1px solid #65c178;
      background: none;
    }
  }

  li {
    position: relative;
    padding: 0;
    margin-bottom: 8px;
    a{
      display: block;
      height: 100%;
      color: #22282e;
      box-shadow: 0 0 3px rgba(0,0,0,.1);
      background-color:#fff;
    }

    .thumb{
      position: relative;
      height: 20rem;
      height: 32vh;
      /*rem;*/
      /*margin-right: 10px;*/
      background: url('') center center / cover no-repeat;
      border-radius: 3px;
    }

    .cnt {
      /*        -webkit-box-flex: 1;
        box-flex: 1;*/
      position: relative;
      padding: 10px 15px;
      /*height: 100%;*/
      p {
        color: #767676;
        margin-top: 5px;
      }
    }

    .title {
      font-size: 13px;
      padding:0.8em 0;
      text-overflow: ellipsis;
      overflow: hidden;
      white-space: nowrap;
      display: block;
    }
  }

  li:nth-child(n+2) {
    border-top: 1px solid #eaeaea;
  }
}




@media (min-width: 640px){
  section.video{
    max-width: 90%;
    margin: 0 auto;
    padding-top: 12px;
  }
  section.video li{
      width:50%;
      padding:0;
      background: none;
      float:left;
      margin:8px 0;
      a{
        display: block;
        background: #fff;
        position: relative;
        border-radius: 4px;
        box-shadow: 0px 1px 2px 0px #e1e1e1;
        div{
          padding:10px;
        }
      }

      &:nth-child(odd){
        padding-left: 0;
        padding-right: 15px;
      }
      &:nth-child(even){
        padding-left: 15px;
        padding-right: 0;
      }
    }
}


 

@media (min-width: 960px){
  section.video li{
    width:25%;
    .thumb{
      height:10rem;
    }
    &:nth-child(4n+1) {
        padding-left: 0;
        padding-right: 10px;
    }
    &:nth-child(4n+2) {
        padding: 0 10px;
    }
    &:nth-child(4n+3) {
        padding: 0 10px;
    }
    &:nth-child(4n) {
        padding-left: 10px;
        padding-right:0;
    }
  }

}

.video-detail{
  .mode{
    position: absolute;top:0;left:0;
    background: rgba(0,0,0,.6);
    color: #fff;
    padding: 10px;
    font-size:14px;
    a{
      color:#fff;
      margin:0 6px;

      border-bottom: 2px solid transparent;
      &.select{
        border-bottom:2px solid #fff;
      }
    }
  }
}
video,iframe{
  width:100%;
  height: 100vh;
  border: none;
}